import { useGameStore } from '../store/gameStore';
import { Pause, Play, Home, RotateCcw, Flame, Users, Zap, Heart, Coins } from 'lucide-react';

export default function GameUI() {
  const {
    gameState,
    currentLevel,
    pauseGame,
    resumeGame,
    restartGame,
    useSkill
  } = useGameStore();

  // 处理暂停/继续
  const handlePauseToggle = () => {
    if (gameState.gameStatus === 'playing') {
      pauseGame();
    } else if (gameState.gameStatus === 'paused') {
      resumeGame();
    }
  };

  // 处理技能使用
  const handleSkillUse = (skillType: 'fireAttack' | 'reinforcement' | 'inspire') => {
    const success = useSkill(skillType);
    if (!success) {
      // 可以添加提示音效或视觉反馈
      console.log(`技能 ${skillType} 无法使用`);
    }
  };

  // 获取技能图标
  const getSkillIcon = (skillType: string) => {
    switch (skillType) {
      case 'fireAttack':
        return <Flame className="w-5 h-5" />;
      case 'reinforcement':
        return <Users className="w-5 h-5" />;
      case 'inspire':
        return <Zap className="w-5 h-5" />;
      default:
        return null;
    }
  };

  // 获取技能名称
  const getSkillName = (skillType: string) => {
    switch (skillType) {
      case 'fireAttack':
        return '火攻';
      case 'reinforcement':
        return '援军';
      case 'inspire':
        return '激将';
      default:
        return '';
    }
  };

  // 渲染技能按钮
  const renderSkillButton = (skillType: 'fireAttack' | 'reinforcement' | 'inspire') => {
    const skill = gameState.skills[skillType];
    const energyPercent = (skill.energy / skill.maxEnergy) * 100;
    const isReady = skill.energy >= skill.maxEnergy && skill.cooldown <= 0;
    const isOnCooldown = skill.cooldown > 0;

    return (
      <div key={skillType} className="relative">
        <button
          onClick={() => handleSkillUse(skillType)}
          disabled={!isReady}
          className={`relative w-16 h-16 rounded-lg border-2 transition-all duration-200 ${
            isReady
              ? 'border-amber-500 bg-amber-100 hover:bg-amber-200 cursor-pointer'
              : 'border-gray-400 bg-gray-100 cursor-not-allowed'
          }`}
        >
          {/* 技能图标 */}
          <div className={`flex items-center justify-center w-full h-full ${
            isReady ? 'text-amber-700' : 'text-gray-500'
          }`}>
            {getSkillIcon(skillType)}
          </div>

          {/* 能量条 */}
          <div className="absolute bottom-1 left-1 right-1 h-1 bg-gray-300 rounded">
            <div
              className="h-full bg-blue-500 rounded transition-all duration-300"
              style={{ width: `${energyPercent}%` }}
            />
          </div>

          {/* 冷却时间显示 */}
          {isOnCooldown && (
            <div className="absolute inset-0 bg-black bg-opacity-50 rounded-lg flex items-center justify-center">
              <span className="text-white text-xs font-bold">
                {Math.ceil(skill.cooldown / 1000)}
              </span>
            </div>
          )}

          {/* 就绪指示器 */}
          {isReady && (
            <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white">
              <div className="w-full h-full bg-green-400 rounded-full animate-pulse" />
            </div>
          )}
        </button>

        {/* 技能名称 */}
        <div className="text-xs text-center mt-1 text-amber-800 font-medium">
          {getSkillName(skillType)}
        </div>
      </div>
    );
  };

  return (
    <div className="fixed top-0 left-0 right-0 z-20 bg-gradient-to-r from-amber-100 to-amber-200 border-b-2 border-amber-600 shadow-lg">
      <div className="flex items-center justify-between px-6 py-3">
        {/* 左侧：关卡信息 */}
        <div className="flex items-center gap-6">
          <div className="text-amber-900">
            <h2 className="font-bold text-lg">{currentLevel?.name || '未知关卡'}</h2>
            <p className="text-sm opacity-75">
              {currentLevel?.mode === 'campaign' ? '战役模式' : 
               currentLevel?.mode === 'endless' ? '无尽模式' : '解谜模式'}
            </p>
          </div>

          {/* 波次信息 */}
          <div className="flex items-center gap-2 bg-amber-50 px-3 py-2 rounded-lg border border-amber-300">
            <div className="text-amber-800">
              <div className="text-sm font-medium">波次</div>
              <div className="text-lg font-bold">
                {gameState.currentWave + 1} / {gameState.totalWaves}
              </div>
            </div>
            <div className="w-20 h-2 bg-amber-300 rounded-full overflow-hidden">
              <div
                className="h-full bg-amber-600 transition-all duration-500"
                style={{
                  width: `${((gameState.currentWave + 1) / gameState.totalWaves) * 100}%`
                }}
              />
            </div>
          </div>
        </div>

        {/* 中间：资源和状态 */}
        <div className="flex items-center gap-6">
          {/* 生命值 */}
          <div className="flex items-center gap-2 bg-red-50 px-3 py-2 rounded-lg border border-red-300">
            <Heart className="w-5 h-5 text-red-600" />
            <span className="font-bold text-red-800">{gameState.playerHealth}</span>
          </div>

          {/* 棋魂 */}
          <div className="flex items-center gap-2 bg-yellow-50 px-3 py-2 rounded-lg border border-yellow-300">
            <Coins className="w-5 h-5 text-yellow-600" />
            <span className="font-bold text-yellow-800">{gameState.chessSpirit}</span>
          </div>

          {/* 单位统计 */}
          <div className="text-amber-800 text-sm">
            <div>单位: {gameState.units.length}</div>
            <div>敌军: {gameState.enemies.length}</div>
          </div>
        </div>

        {/* 右侧：技能和控制 */}
        <div className="flex items-center gap-4">
          {/* 技能按钮 */}
          <div className="flex gap-3">
            {renderSkillButton('fireAttack')}
            {renderSkillButton('reinforcement')}
            {renderSkillButton('inspire')}
          </div>

          {/* 分隔线 */}
          <div className="w-px h-12 bg-amber-400" />

          {/* 控制按钮 */}
          <div className="flex gap-2">
            {/* 暂停/继续 */}
            <button
              onClick={handlePauseToggle}
              className="w-10 h-10 rounded-lg bg-amber-600 text-white hover:bg-amber-700 transition-colors flex items-center justify-center"
              title={gameState.gameStatus === 'playing' ? '暂停游戏' : '继续游戏'}
            >
              {gameState.gameStatus === 'playing' ? (
                <Pause className="w-5 h-5" />
              ) : (
                <Play className="w-5 h-5" />
              )}
            </button>

            {/* 重新开始 */}
            <button
              onClick={restartGame}
              className="w-10 h-10 rounded-lg bg-orange-600 text-white hover:bg-orange-700 transition-colors flex items-center justify-center"
              title="重新开始"
            >
              <RotateCcw className="w-5 h-5" />
            </button>

            {/* 返回主菜单 */}
            <button
              onClick={() => window.location.href = '/'}
              className="w-10 h-10 rounded-lg bg-gray-600 text-white hover:bg-gray-700 transition-colors flex items-center justify-center"
              title="返回主菜单"
            >
              <Home className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>

      {/* 游戏状态指示器 */}
      {gameState.gameStatus === 'paused' && (
        <div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
          <div className="bg-amber-100 px-4 py-2 rounded-lg border-2 border-amber-600">
            <span className="text-amber-900 font-bold">游戏已暂停</span>
          </div>
        </div>
      )}
    </div>
  );
}